<template>
  <div class="footer">
    <div class="foot-bottom">
      <dl v-for="item in footData">
        <dt>{{item.one}}</dt>
        <dd v-for="items in item.second"><a :href="items.link">{{items.title}}</a></dd>
      </dl>
      <ul>
        <li><img src="../../assets/images/dh.jpg" alt="">029-89196083</li>
        <li><strong>邮箱：</strong>info@bibangtech.com</li>
        <li><strong>西安：</strong>雁塔区科技二路66号宏源大厦</li>
        <!--<li><strong>深圳：</strong>龙华新区观光路1301号银星科技大厦</li>-->
      </ul>
    </div>
    <div class="sidebox">
      <div class="side">
        <p>陕ICP备15006912号-1　© 2015-2019 西安彼帮智能科技有限公司</p>
        <div>
          <a href="">隐私政策</a>
          <a href="">服务协议</a>
        </div>
        <p style="position: relative">关注我们：
          <span class="wx" @mouseleave="ewmnone()" @mouseenter="ewmshow()"></span>
          <!--<span><i class="iconfont icon-weibo"></i></span>-->
          <!--<span><i class="iconfont icon-youku"></i></span>-->
          <span class="wb"></span>
          <span class="yk"></span>
          <img v-show="ewm" class="animated bounce" src="../../assets/images/ewm.jpg" alt="">
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "footerBox",
    data() {
      return{
        footData: [
          {
            one: '服务支持',
            second: [
              {
                title: '相关下载',
                link:'https://www.baidu.com/'
              },
              {
                title: '售后服务',
                link:'https://www.sina.com/'
              },
              {
                title: '常见问题',
                link:'https://www.baidu.com/'
              }
            ]
          },
          {
            one: '购买渠道',
            second: [
              {
                title: '授权经销商',
                link:'https://www.baidu.com/'
              },
              {
                title: '淘宝商城',
                link:'https://www.baidu.com/'
              }
            ]
          },
          {
            one: '媒体中心',
            second: [
              {
                title: '公司新闻',
                link:'https://www.baidu.com/'
              },
              {
                title: '媒体报道',
                link:'https://www.baidu.com/'
              }
            ]
          },
          {
            one: '关于彼帮',
            second: [
              {
                title: '了解我们',
                link:'https://www.baidu.com/'
              },
              {
                title: '加入我们',
                link:'https://www.baidu.com/'
              },
              {
                title: '联系我们',
                link:'https://www.baidu.com/'
              }
            ]
          }
        ],
        ewm: false
      }
    },
    methods: {
      ewmshow() {
        this.ewm = true;
      },
      ewmnone() {
        this.ewm = false;
      }
    }
  }
</script>

<style lang="scss">
  .footer {
    background: white;
    .foot-top-bot {
      border-bottom: 1px solid #d5d5d5;
      .foot-top {
        width: 80%;
        height: 60px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        > ul {
          height: 44px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: relative;
          > li:nth-child(2) {
            border-right: 1px solid #d5d5d5;
            border-left: 1px solid #d5d5d5;
          }
          > li:nth-child(3) {
            border-right: 1px solid #d5d5d5;
          }
          > li {
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 70px;
            > i {
              font-size: 26px;
              color: #545454;
              margin-right: 4px;
            }
          }
        }
      }
    }
    .foot-bottom {
      display: flex;
      width: 70%;
      margin: 0 auto 50px;
      padding-top: 50px;
      justify-content: space-around;
      > dl {
        > dt {
          color: #666666;
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 29px;
        }
        /*margin-right: 90px;*/
        margin-left: 30px;
        a {
          color: #666666;
          font-size: 14px;
          &:hover {
            color: #00aeef;
          }
        }
        > dd {
          margin: 14px 0;

        }
      }
      > ul {
        position: relative;
        :before {
          content: '';
          width: 1px;
          height: 100%;
          background: #d5d5d5;
          position: absolute;
          top: -10px;
          left: -20px;
        }
        > li {
          color: #545454;
          font-size: 12px;
          margin: 10px 0;
        }
        li:nth-child(1) {
          line-height: 40px;
          font-size: 30px;
          color: #666666;
          font-weight: 600;
          display: flex;
        }

      }
    }
    .sidebox {
      width: 100%;
      height: 100%;
      background: #f2f2f2;
      .side {
        width: 1200px;
        display: flex;
        justify-content: space-between;
        padding: 25px 0;
        margin: 0 auto;
        align-items: center;
        > p {
          font-size: 14px;
          color: #999999;
          display: flex;
          align-items: center;
          img {
            position: absolute;
            top: -166px;
            left: 16px;
          }
          .wx {
            display: inline-block;
            width:26px;
            height:26px;
            background: url(../../assets/images/wx.png);
            background-repeat: no-repeat;
            background-size: 26px 26px;
            &:hover{
              background-image: url(../../assets/images/wx_b.png);
            }
          }
          .wb {
            display: inline-block;
            width:26px;
            height:26px;
            background-image: url(../../assets/images/wb.png);
            background-repeat: no-repeat;
            margin: 0 20px;
            background-size: 26px 26px;
            &:hover{
              background-image: url(../../assets/images/wb_b.png);
            }
          }
          .yk {
            display: inline-block;
            width:26px;
            height:26px;
            background-image: url(../../assets/images/yk.png);
            background-repeat: no-repeat;
            background-size: 26px 26px;
            &:hover{
              background-image: url(../../assets/images/yk_b.png);
            }
          }
        }
        > div {
          width: 555px;
          a {
            margin: 0 3px;
            color: #999999;
            &:hover {
              color: #00aeef;
            }
          }
        }
      }
    }

  }
</style>
